<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部盒子 -->
  <header>
    <h1>数据可视化-Echars</h1>
    <div class="showTime"></div>
    <!-- 格式： 当前时间：2020年3月17-0时54分14秒 -->
    <script>
      var t = null;
      t = setTimeout(time, 1000);//開始运行
      function time() {
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
      }
    </script>

  </header>
  <!-- 页面主体盒子 -->
  <section class="mainBox">
    <div class="column">
      <div class="panel">
        <div class="bar">
          <h2>柱形图-就业行业</h2>
          <div class="chart">图表</div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="panel">
        <div class="line">
          <h2>折线图-人员变化</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="panel">
        <div class="pie">
          <h2>扇形图-年龄分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- no数字模块 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>123</li>
            <li>123</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>前端需求</li>
            <li>市场供应</li>
          </ul>
        </div>
      </div>
      <!-- 地图模块 -->
      <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="chart"></div>
      </div>
    </div>
    <div class="column">
      <div class="panel">
        <div class="bar1">
          <h2>柱形图-技能掌握</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="panel">
        <div class="line1">
          <h2>折线图-播放量</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="panel">
        <div class="pie1">
          <h2>扇形图-地域分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
  </section>
  <script src="./js/flexible.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/myindex.js"></script>
  <script src="./js/china.js"></script>
</body>

</html>